<template>
    <div class="ui_page_views_sum">
        <div class="sum_view" v-for="item in list" :key="item.module">
            <h4>{{ item.module | nameText }}</h4>
            <div class="info_list">
                <div class="info_view">
                    <p>{{$t('portal.dataBoard.visits')}}</p>
                    <p class="num">{{ item.viewCount }}</p>
                </div>
                <div class="info_view">
                    <p>{{$t('portal.dataBoard.userCount')}}</p>
                    <p class="num">{{ item.userCount }}</p>
                </div>
                <!-- <div class="info_view">
                    <p>平均停留时长</p>
                    <p class="num">1.5h</p>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import i18n from '@src/locales'
export default {
    props: {
        list: {
            type: Array,
            default: () => []
        },
    },
    data() {
        return {
        }
    },
    filters: {
        nameText(value) {
            return value == 'CLICK_HOME' ? i18n.t('portal.homepage') : value == 'CLICK_CENTER' ? i18n.t('portal.personal') : value == 'CLICK_MALL' ? i18n.t('portal.market') : value == 'CLICK_SERVER' ? i18n.t('portal.service') : ''
        },
    },
    mounted() {
    },
    beforeDestroy() {
    },
};
</script>

<style lang="scss" scoped>
.ui_page_views_sum{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 16px;
    padding-bottom: 46px;
    height: 336px;
    .sum_view{
        width: calc(50% - 12px);
        margin: 0 12px 16px 0;
        padding: 16px 0;
        border-radius: 4px;
        text-align: center;
        &:first-child{
            background: linear-gradient(180deg, #FDF8E4 0%, rgba(255,255,255,0.00) 100%);
        }
        &:nth-child(2){
            background: linear-gradient(180deg, #EEFFE5 0%, rgba(255,255,255,0.00) 100%);
        }
        &:nth-child(3){
            background: linear-gradient(180deg, #E5FFFC 0%, rgba(255,255,255,0.00) 100%);
        }
        &:nth-child(4){
            background: linear-gradient(180deg, #E5F6FF 0%, rgba(255,255,255,0.00) 100%);
        }
        h4{
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            margin-bottom: 16px;
        }
        .info_list{
            display: flex;
            .info_view{
                width: 50%;
                position: relative;
                &::after{
                    content: "";
                    position: absolute;
                    width: 1px;
                    height: 52px;
                    background: #F0F0F0;
                    display: block;
                    top: 0;
                    left: 0;
                    bottom: 16px;
                }
                &:first-child::after{
                    display: none;
                }
                p{
                    margin: 0;
                    &:first-child{
                        opacity: 0.65;
                    }
                }
                .num{
                    font-family: HelveticaNeue;
                    font-size: 24px;
                    margin-top: 4px;
                    opacity: 1;
                }
            }
        }
    }
}
</style>
